<template>
  <div id="app">
    <v-header></v-header>

    <!--路由出口-->
    <router-view></router-view>

    <!--<todoList :AppTitle="title" ref="todoList"></todoList>-->
    <!--<button @click="getChildData()">获取任务列表</button>-->
    <!--<ul v-if="this.childList.length>0">-->
      <!--<li v-for="item in childList">{{item.content}}<span>{{item.checked?"已完成":"未完成"}}</span></li>-->
    <!--</ul>-->
    <!--&lt;!&ndash;<button @click="vueResourceGetData()">vue-resource获取数据</button>&ndash;&gt;-->
    <!--<button @click="axiosGetData()">axios获取数据</button>-->
  </div>
</template>

<script>
  import Axios from 'axios';
export default {
  name:'app',
  data(){
    return{
      title:'我是放在app中的任务列表',
      msg:'我是APP组件',
      childList:[],
    }
  },
  methods:{
    getChildData(){
      this.childList=this.$refs.todoList.list;
      console.log(this.$refs.todoList);
    },
    // vue-resource获取数据方法
    vueResourceGetData(){
      // es6语法
      this.$http.get('http://www.gqluck.com/index/index/getList').then(
        (response)=>{
          console.log(response);
        },
        (err)=>{
          console.log(err);
        }
      );
      // 普通写法
      // this.$http.get('http://www.gqluck.com/index/index/getList').then(
      //   function (response) {
      //     console.log(response);
      //   },
      //   function (err) {
      //     console.log(err);
      //   }
      // )
    },
    // axios获取数据方法
    axiosGetData(){
      Axios.get('http://www.gqluck.com/index/index/getList').then(
        response=>console.log(response)
      ).catch(
        err=>console.log(err)
      )
    },
  }
}
</script>

<style scoped>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  padding-top: 70px;
}
  button{
    outline: none;
    border:1px solid #f5f5f5;
    background-color: #f5f5f5;
    padding:10px 20px;
    border-radius: 4px;
    /*margin-top: 20px;*/
  }
  ul{
    background-color: #7f7f7f;
    padding: 10px 0;
  }
  ul>li{
    list-style: none;
    text-align: left;
    padding: 5px 10px;
    box-sizing: border-box;
  }
  ul>li span{
    float: right;
  }
</style>
